<template>
	<image style="width: 100%;height: 200px;" :src="url" mode=""></image>
	<view class="card-container">
		<view class="card" v-for="item in list" :key="item" @click="toDetial(item.id)" v-if="list.length !== 0">
			<view class="left">
				<image :src="item.thumb" mode=""></image>
			</view>
			<view class="right">
				<text>{{ item.title }}</text>
				<br>
				<text class="info">授课人：{{ item.teacher_name }}</text>
				<view>
					<!-- <view class="botLeft">
					{{ "免费" }}
				</view>
				<view class="botRight">
					剩余名额: {{ item.update_by }}
				</view> -->
					<view style="color: #999999;" v-if="item.progress=='0.00'" class="bottom">学习进度:<text
							style="font-weight: 600;color: #dd3621;flex:5">未开始</text></view>
					<view style="color: #999999;" v-else class="bottom">学习进度:<text
							style="font-weight: 600;color: #dd3621;">{{item.progress * 100}}%</text></view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		projectDetails
	} from '@/api/study.js';
	import {
		mixin
	} from '@/static/mixin.js'
	export default {
		mixins: [mixin],
		onLoad: function(option) {
			console.log(option.id)
			this.projectId = option.id
			let that = this;
			projectDetails({
				page: 1,
				page_size: 20,
				id: option.id,
				is_require: 0
			}).then(res => {
				console.log(res);
				that.url = res.thumb;
				that.list = res.courseList.list;
			})
		},
		data() {
			return {
				url: '',
				list: [],
				projectId: 1
			};
		},
		methods: {
			toDetial(id) {
				console.log(this.projectId, "准备传递的项目id");
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&projectId=${this.projectId}`
				})
			}
		}
	};
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f8f8f8;
	}
</style>

<style scoped lang="scss">
	@import '../../../static/font.scss';
	.card-container{
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
		padding-bottom:120rpx;
	}
	.card {
		background-color: #fff;
		display: flex;
		box-sizing: border-box;
		margin: 10px;
		border-radius: 10px;
		overflow: hidden;
		height: 130px;

		.left {
			width: 50%;
			height: 100%;
			position: relative;

			.type {
				// position: absolute;
				// right: 10px;
				// top: 10px;
				padding: 3px;
				color: $uni-text-color-white;
				background-color: rgba(86, 86, 86, 0.8);
				border-radius: 5px;
				font-size: 12px;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			width: 50%;
			padding: 10px;
			position: relative;

			text {
				font-size: $uni-text-size-md;
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
				overflow: hidden;
				-webkit-box-orient: vertical; //从上到下排列子元素;
				text-overflow: ellipsis; //溢出部分用省略号代替
				-webkit-line-clamp: 2; //设置文本显示两行
			}

			.info {
				color: $uni-text-color-grey;
				font-size: 14px;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				margin-top: 20rpx;
				text-overflow: ellipsis;
			}

			.bottom {
				view {
					color: $uni-text-color-grey;
					font-size: 14px;
				}

				.botLeft {
					color: red;
					font-size: 16px;
				}

				text {
					font-size: 14px;
				}

				width: 80%;
				position: absolute;
				bottom: 10px;
				display: flex;
				font-size: 14px;
				// justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
